<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-nav-bar :title="route.query.title" left-arrow @click-left="router.push('/mine')" />
    <!-- 地址列表区域 -->
    <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
    <div class="no-data" v-if="!list || list.length == 0">暂无地址，请先添加地址哦~</div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {useRoute, useRouter} from "vue-router"

const router = useRouter()
const route = useRoute()

const chosenAddressId = ref(-1);

const list = JSON.parse(sessionStorage.getItem("userInfo")).addressList || [];

function onAdd() {
  console.log("新增地址");
  // 跳转到新增地址的页面
  router.push({path:"/addressEdit",query:{type:"add"}});
}
// 编辑地址
function onEdit(data) {
  console.log(data);
  // 拿到被编辑的数据的id，准备好业务类型的标识符type（edit表示编辑）
  
  router.push({path:"/addressEdit",query:{data:JSON.stringify(data), type:"edit"}});
}
</script>

<style lang="scss" scoped>
.container {

  :deep .van-nav-bar__arrow,
  :deep .van-nav-bar__title {
    color: #00682f;
  }

  :deep .van-button--danger {
    background-color: #00682f;
    border: #00682f;
  }

  .no-data {
    text-align: center;
    color: gray;
  }
}
</style>
